<template>
	<view class="all">
		<!-- <view class="top">
			<view :class=" top_key == 1?'top_boxs':'top_box'" @click="top_tap(1)"> 产品 </view>
			<view  :class=" top_key == 3?'top_boxs':'top_box'" @click="top_tap(3)"> 消费 </view>
		</view> -->
		<view class="list">
			<view class="box" v-for="(item,index) in list_data" :key="index" @click.stop="shop_details_tap(item.goods_id)">
				<image :src="item.image" class="box_img" mode="aspectFill"></image>
				<view style="margin-left: 10upx;">
					<view class="title">{{item.name}}</view>
					<view style="display: flex;justify-content: space-between;">
						<view style="color: #ff0000;font-size: 28upx;"> ¥{{item.price}} </view>
						<!-- <view style="color: #ff0000;font-size: 28upx;" v-if="item.type == 3"> 积分{{item.price}} </view> -->
						<view style="font-size: 20upx;color: #333;border: 1upx solid #333;padding: 10upx;" @click.stop="collect_tap(item.goods_id)"> 移除 </view>
					</view>
				</view>
			</view>
			<view v-if="list_data.length == 0" style="width: 100%;line-height: 100upx;height: 100upx;color: #999999;font-size: 28upx;text-align: center;">暂无更多数据</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				top_key:1,
				list_data:[],
				page:1
			}
		},
		onLoad() {
			// this.user_goods_api()
		},
		onShow() {
			this.page = 1
			this.user_goods_api()
		},
		methods: {
			shop_details_tap(goods_id) {
				uni.navigateTo({
					// url:'../shop_details/shop_details?shop_details='+shop_details
					url:'../shop_details/shop_details?goods_id='+goods_id
				})
			},
			collect_tap(goods_id) {
				var that = this
				var goods_id = goods_id
				uni.showModal({
					title: '提示',
					content: '确认移除吗？',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.goods_collect_api(goods_id)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			goods_collect_api(goods_id) {
				var that = this
				that.page = 1
				that.$request(that.$Api.goods_collect_api, {
					access_token: uni.getStorageSync('access_token'),
					goods_id:goods_id
				}, "POST").then(res => {
					if (res.data.code == 0) {
						that.page = 1
						that.user_goods_api()
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			top_tap(num) {
				this.top_key = num
				this.page = 1
				this.user_goods_api()
			},
			//获取首页
			user_goods_api() {
				var that = this
				that.$request(that.$Api.user_goods_api, {
					access_token: uni.getStorageSync('access_token'),
					type:that.top_key,
					page:that.page
				}, "POST").then(res => {
					if (res.data.code == 0) {
						that.list_data = res.data.data.list
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
		},
		onReachBottom() {
			var that = this
			that.page++
			that.$request(that.$Api.user_goods_api, {
				access_token: uni.getStorageSync('access_token'),
				page:that.page,
				type:that.top_key
			}, "POST").then(res => {
				if (res.data.code == 0) {
					if( res.data.data.list.length != 0 ) {
						that.list_data = that.list_data.concat(res.data.data.list)
					}
				} else {
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon: 'none'
					});
				}
			})
		}
	}
</script>

<style lang="less">
	page{
		.all{
			.list{
				.box{
					.title{
						width: 500upx;
						height: 160upx;
						font-size: 28upx;
						overflow:hidden;
						text-overflow:ellipsis;
						white-space:nowrap;
					}
					.box_img{
						width: 200upx;
						height: 200upx;
					}
					display: flex;
					padding: 20upx 0;
					border-bottom: 1upx solid #ddd;
				}
				width: 700upx;
				padding: 0 25upx;
			}
			.top{
				.top_boxs{
					width: 300upx;
					padding: 20upx 0;
					text-align: center;
					color: #ff0000;
					border-bottom: 1upx solid #ff0000;
				}
				.top_box{
					width: 300upx;
					padding: 20upx 0;
					text-align: center;
					color: #333;
					border-bottom: 1upx solid rgba(red, green, blue, 0);
				}
				display: flex;
				width: 700upx;
				padding: 0 25upx;
				justify-content: space-between;
				border-bottom: 1upx solid #ddd;
			}
		}
	}
</style>
